<template>
	<view class="">
		<scroll-view  :style="{height:navHeight+'px'}" class="sv"
						:scroll-top="0"
		                   scroll-y
						   lower-threshold="50"
		                   :scroll-with-animation='true'
		                   @scrolltolower="handleScrollToLower">
			<view v-if="list.length>0">
				<uni-list v-for="(item,index) in list">
					<uni-list-item :title="item.isOpen=='true'?item.name:'匿名'" :note="'功德金：'+item.amount+'元'+(item.remark?'，留言：'+item.remark:'')" thumb="/static/default_avatar.png"
						 thumb-size="lg" :rightText="item.createTime" :avatarCircle="true">
							<!-- <template v-slot:body>
								<text class="slot-box slot-text">自定义两侧插槽</text>
							</template> -->
					</uni-list-item>
				</uni-list>
				<view v-if="isBottom" class="align-center margin-bottom-15">
					<text>没有更多数据了！</text>
				</view>
			</view>
			<view v-else class="align-center">
				<text>暂无数据！</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:"",
				list:[],
				pagination:{},
				pH:0,
				navHeight:0,
				isBottom:false
			}
		},
		onReady() {
			let that=this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that._data.pH=res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					let titleH=uni.createSelectorQuery().select(".sv"); //想要获取高度的元素名（class/id）
					titleH.boundingClientRect(data=>{
						let pH=that._data.pH; 
						that._data.navHeight=pH-data.top  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
					}).exec()
				}
			})
		},
		onLoad:function(option){
			
			 this.apiurl = getApp().globalData.staticUrl
		     this.id = option.id
		     uni.setNavigationBarTitle({
		         title:'登记记录'
		     })
			 // this.$http.get('/temple.order/templeDonationOrder/api/list', {
			 // 	'donationId':this.id
			 // }).then((res) => {
			 // 	this.list = res.data.result.records
			 // })
			 this.getList()
			 
			 
		},
		methods: {
			//   分页
			handleScrollToLower () {
				console.log("scroll to bottom!")
				this.getList()
			},
			getList(){
				var params = {
					'userId':uni.getStorageSync('userInfo').id
				}
				//首次加载pagination没有值
				if(this.pagination.current && this.pagination.size && this.pagination.total){
					params.pageNo = this.pagination.current;//开始页码
					params.pageSize = this.pagination.size//页数
					if(params.pageNo*params.pageSize < this.pagination.total){
						params.pageNo = params.pageNo+1
						this.getData(params)
					}else{
						this.isBottom = true;
					}
				}else{
					this.getData(params)
				}
				
			},
			getData(params){
				this.$http.get('/temple.order/templeDonationOrder/api/list', params
				).then((res) => {
					this.pagination.current = res.data.result.current
					this.pagination.size = res.data.result.size
					this.pagination.total = res.data.result.total
					if(this.pagination.current > 1){
						this.list = [...this.list,...res.data.result.records]
					}else{
						this.list = res.data.result.records;
					}
				})
			}
			
		}
	}
</script>

<style scoped lang='scss'>
	.uni-list-item__content-note{
		color: red;
		font-size: 16px;
	}
</style>
